<script setup>
import { User, Clock, Star } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getNews } from '@/api/news.js'
defineOptions({
  name: 'AppAdvice'
})
const route = useRoute()
const detail = ref({})
onMounted(async () => {
  detail.value = await getNews(route.params.id)
  console.log(detail.value);
})
</script>

<template>
  <div class="container my-5">
    <div class="row" v-if="JSON.stringify(detail) !== '{}'">
      <aside class="col-12 col-lg-3">
        <ul class="list-group">
          <li
            class="list-group-item text-center text-white"
            style="background-color: #104094"
          >
            新闻中心
          </li>
        </ul>
        <ul class="list-group my-3">
          <li
            class="list-group-item text-center"
            v-for="value in ['企业咨询', '行业动态']"
            :key="value"
            v-text="value"
          ></li>
        </ul>
        <div class="bg-dark text-white p-4">
          <h3>联系方式</h3>
          <p>联系人:陈经理</p>
          <p>电话: 1 3888888888</p>
          <p>Email: 8888@qq.com</p>
          <p>热线: 400 800 8888</p>
          <p>地址:广东省广州市荔枝湾区流花 路100号</p>
        </div>
      </aside>
      <main class="col-12 col-lg-9">
        <div>
          <h4>{{ detail.data.data.newstitle }}</h4>
          <div class="d-flex my-4">
            <el-link class="mr-4" :underline="false" :icon="User">{{
              detail.data.data.readcount
            }}</el-link>
            <el-link class="mx-4" :underline="false" :icon="Clock">
              {{ detail.data.data.createtime }}
            </el-link>
            <el-link :underline="false" :icon="Star">{{
              detail.data.data.collect
            }}</el-link>
          </div>
          <h3>作者：{{ detail.data.data.loginname }}</h3>
          <p
            class="text-secondary desc"
            v-html="detail.data.data.newscontent"
          ></p>
        </div>
        <hr />

        <p class="text" v-html="detail.data.data.newscontent"></p>
      </main>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text {
  line-height: 30px;
  word-spacing: 5px;
}
.desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
